<template>
  <div>
    <div id="main" style="width:100%;height:400px"></div>
  </div>
</template>

<script>
import {getHistoryPriceByStockCode} from '@/api/eye/stockPrice'
import * as echarts from "echarts";

export default {
  name: 'EchartsDemo',
  data() {
    return {}
  },
  mounted() {
    getHistoryPriceByStockCode('001286').then(res => {
      console.log(res)

      let dates = res.data.date
      let data = res.data.price

      let volumeData = []//交易量添加颜色判断
      for (let i = 0; i < data.length; i++) {
        volumeData.push([dates[i], data[i][4], data[i][0] > data[i][1] ? 1 : -1]);
      }
      let upColor = '#ec0000';//红涨
      let downColor = '#00da3c';//绿跌
      console.log(volumeData)

      // 初始化 ECharts 实例
      let myChart = echarts.init(document.getElementById('main'));

      // 计算各种日线图
      function calculateMA(dayCount, data) {
        let result = [];
        for (let i = 0, len = data.length; i < len; i++) {
          if (i < dayCount) {
            result.push('-');
            continue;
          }
          let sum = 0;
          for (let j = 0; j < dayCount; j++) {
            sum += data[i - j][1];
          }
          result.push(sum / dayCount);
        }
        return result;
      }

      // 指定图表的配置项和数据
      let option = {
        backgroundColor: 'rgba(159,162,171,0)',// 背景色
        legend: {// 要画的线
          data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30', 'Volume'],
          inactiveColor: '#777',//图例关闭时的颜色。
          textStyle: {//图例的公用文本样式。
            color: '#181818'
          }
        },
        tooltip: {//提示框组件
          trigger: 'axis',
          axisPointer: {//坐标轴指示器配置项。
            animation: false,// 过渡动画
            type: 'cross',// 类型:'line' 直线指示器,'shadow' 阴影指示器,'none' 无指示器,'cross' 十字准星指示器。
            lineStyle: {// 线的样式
              color: '#376df4',// 鼠标放到图上会出来一个竖立的坐标线
              width: 2,
              opacity: 1
            }
          },
          visualMap: {//视觉映射组，就是将数据映射到视觉元素
            show: true,
            seriesIndex: 1,//指定取哪个系列的数据，第几个图形的数据，从0开始，1代表的是成交量的柱状图
            pieces: [{//自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
              value: 1,//value值为1则用downColor颜色的样式
              color: downColor
            }, {
              value: -1,
              color: upColor
            }]
          }
        },
        //x轴设置
        xAxis: [
          {
            type: 'category',// 坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据.'time' 时间轴，适用于连续的时序数据.'log' 对数轴。适用于对数数据。
            data: dates,// x轴数据循环方法返回结果
            axisLine: {lineStyle: {color: '#8392A5'}}// 底部x轴颜色
          },
          {
            type: 'category',
            gridIndex: 1,
            data: dates,
            scale: true,
            //boundaryGap: false,
            axisLine: {onZero: false},
            axisTick: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
          }
        ],
        yAxis: [
          {
            scale: true,
            splitArea: {
              show: true
            }
          },
          {
            scale: true,
            gridIndex: 1,
            splitNumber: 2,
            axisLabel: {show: false},
            axisLine: {show: false},
            axisTick: {show: false},
            splitLine: {show: false}
          }
        ],
        grid: [
          {//蜡烛图的位置
            left: '10%',
            right: '8%',
            height: '50%'
          },
          {//成交量柱状图的位置
            left: '10%',
            right: '8%',
            top: '63%',
            height: '16%'
          }
        ],
        dataZoom: [{//组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。就是滚轴上下滚的缩放
          textStyle: {
            color: '#8392A5'
          },
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',// 鼠标放在柱上会出来的图标,默认小手
          handleSize: '80%',//控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
          dataBackground: {//数据阴影的样式。
            areaStyle: {//阴影的填充样式
              color: '#8392A5'
            },
            lineStyle: {//阴影的线条样式
              opacity: 0.8,
              color: '#8392A5'
            }
          },
          handleStyle: {//手柄的样式配置
            color: '#fff',
            shadowBlur: 3,//图形阴影的模糊大小
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }, {
          type: 'inside'
        }],
        animation: false,// 翻页动画
        // 这里开始设置日k线,如单日,5日,10日,20日,30日
        series: [//系列列表。每个系列通过 type 决定自己的图表类型
          {
            type: 'candlestick',// 显示种类,如线性等
            name: '日K',
            data: data,// 日k线每日的数据
            itemStyle: {// 对象样式
              normal: {
                color: '#FD1050',
                color0: '#0CF49B',
                borderColor: '#FD1050',
                borderColor0: '#0CF49B'
              }
            }
          },
          {
            name: 'MA5',// 5日k线
            type: 'line',
            data: calculateMA(5, data),// 使用它返回数据方法(几天，数据)
            smooth: true,//平滑曲线显示(好看丝滑)
            showSymbol: true,//是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
            lineStyle: {
              normal: {
                width: 1// 5日k线粗细
              }
            }
          },
          {
            name: 'MA10',
            type: 'line',
            data: calculateMA(10, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            }
          },
          {
            name: 'MA20',
            type: 'line',
            data: calculateMA(20, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            }
          },
          {
            name: 'MA30',
            type: 'line',
            data: calculateMA(30, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            }
          },
          {//成交量柱状图的设置
            name: 'Volume',
            type: 'bar',
            barWidth: 30,//柱状图的宽度
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: volumeData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    })
  },
  methods: {}
}
</script>
